<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 审批属性设置 -->
		<div class="approval-attributes" id="approvalAttributes" style="display: block;">
			<div class="mask"></div>
			<div class="approval-editor-drawer">
				<div class="approval-editor-content">
					<div class="approval-editor-name-wrapper">
						<div class="approval-editor-name">
							<input v-model="approvalName" class="approval-name-editor-input readonly"
								readonly="readonly" type="text"></div>
					</div>
					<div class="approval-editor-form">
						<div class="item-wrapper">
							<div class="approval-type-wrapper">
								<div class="item-key-wrapper">
									<div class="item-key">审批类型</div>
									<label class="">
										<input value="不计入审批效率统计"
											type="checkbox">
										<span class="">不计入审批效率统计</span>
									</label>
								</div>
								<div class="item-content">
									<div class="radio-line-group">
										<label class="">
											<input value="人工审批" v-model="approvalMethod" name="approval-methodly1cwkbrz7oc16voe7" type="radio">
											<span class="">人工审批</span>
										</label>
										<label class="">
											<input value="自动通过" v-model="approvalMethod" name="approval-methodly1cwkbrz7oc16voe7" type="radio">
											<span class="">自动通过</span>
										</label>
										<label class="">
											<input value="自动拒绝" v-model="approvalMethod" name="approval-methodly1cwkbrz7oc16voe7" type="radio">
											<span class="">自动拒绝</span>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="">
							<div class="approval-editor-tab-wrapper">
								<div class="approval-function-btn-group">
									<div class="btn approval-function-btn active">设置审批人</div>
									<div class="btn approval-function-btn ">表单权限</div>
									<div class="btn approval-function-btn ">操作权限</div>
								</div>
								<div class="approval-function-content-approver-set setting-panel">
									<div class="approvers-container">
										<div class="approval-function-setting-content" v-for="item in approvelTargets">
											<div class="approver-setting">
												<div class="header">审批人</div>
												<div class="radio-line-group">
													<label class="" v-for="approvalTarget in approvalConfig.approvalTargetTypes">
														<input value="上级"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio">
														<span class="">{{approvalTarget}}</span>
													</label>
													
													<!-- <label
														class=""><input value="部门负责人"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">部门负责人</span></label><label
														class=""><input value="角色"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">角色</span></label><label
														class=""><input value="用户组"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">用户组</span></label><label
														class=""><input value="指定成员"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															checked="true" type="radio"><span
															class="">指定成员</span></label><label class=""><input
															value="提交人自选"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">提交人自选</span></label><label
														class=""><input value="提交人本人"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">提交人本人</span></label><label
														class=""><input value="节点审批人"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">节点审批人</span></label><label
														class=""><input value="连续多级上级"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">连续多级上级</span></label><label
														class=""><input value="连续多级部门负责人"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">连续多级部门负责人</span></label><label
														class=""><input value="表单内联系人"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">表单内联系人</span></label><label
														class=""><input value="表单内部门"
															name="approver-setting-selectorly1cwkbrlzid3xy8zsd"
															type="radio"><span class="">表单内部门</span></label> -->
													</div>
												<div class="sub-content">
													<div class="sub-content-top-line"></div>
													<div class="sub-approver approver-user-selector add-user" v-if="item.target==='指定成员'">
														<p class=""><span class="">添加成员</span><span
																class="light-text">（不能超过25人）</span></p>
														<div class="add-approver-wrapper">
															<div class="add-approver-btn">+</div>
															<div class="add-approver-item" v-for="user in item.users">
																<img src="https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&amp;cut_type=&amp;quality=&amp;format=image&amp;sticker_format=.webp">
																<div class="">{{user}}</div>
																<div class="close-btn">×</div>
															</div>
														</div>
													</div>
													<div class="sub-approver approver-user-selector role-user">
														<p class="">选择角色</p>
														<div class="add-approver-wrapper role-selector-wrapper">
															<div class="radio-line-group"><label class=""><input
																		value="单选"
																		name="fanwei-grouply1cwkbrykcpeponlkc"
																		checked="true" type="radio"><span
																		class="">单选</span></label><label class=""><input
																		value="多选"
																		name="fanwei-grouply1cwkbrykcpeponlkc"
																		type="radio"><span class="">多选</span></label>
															</div>
														</div>
														<p class="选择范围"></p>
														<div class="add-approver-wrapper role-selector-wrapper">
															<div class="radio-line-group" style="display: none;"><label
																	class=""><input value="全公司"
																		name="role-grouply1cwkbr69x4aw04zoc"
																		checked="true" type="radio"><span
																		class="">全公司</span></label><label
																	class=""><input value="指定成员"
																		name="role-grouply1cwkbr69x4aw04zoc"
																		type="radio"><span
																		class="">指定成员</span></label><label
																	class=""><input value="指定角色"
																		name="role-grouply1cwkbr69x4aw04zoc"
																		type="radio"><span class="">指定角色</span></label>
															</div>
														</div>
														<div class="sub-approver approver-user-selector add-user"
															style="display: none;">
															<p class="">
																<span class="">添加成员</span>
																<span class="light-text">（不能超过25人）</span>
															</p>
															<div class="add-approver-wrapper">
																<div class="add-approver-btn">+</div>
															</div>
														</div>
													</div>
													<div class="sub-approver approver-user-selector user-group">
														<p class="">用户组</p>
														<div class="add-approver-wrapper usergroup-selector-wrapper">
															<div class="supervisor-select"><select class="">
																	<option class="">用户组1</option>
																	<option class="">用户组2</option>
																	<option class="">用户组3</option>
																</select></div>
														</div>
														<div class="role-info"><span class="">仅展示可见范围内的用户组，可前往</span><a
																href="https://www.baidu.com">管理后台</a><span
																class="">进行配置</span></div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="add-approver-setting">
										<div class="add-operator">＋ 添加审批人</div>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">多人审批时</div>
									<div class="item-content">
										<div class="radio-line-group"><label class=" display-block"><input
													value="会签（需所有人审批人同意）" name="approvel-typely1cwkbskux2rtaow8"
													type="radio"><span class="">会签（需所有人审批人同意）</span></label><label
												class=" display-block"><input value="或签（一名审批人同意即可）"
													name="approvel-typely1cwkbskux2rtaow8" type="radio"><span
													class="">或签（一名审批人同意即可）</span></label><label
												class=" display-block"><input value="依次审批（按顺序依次审批）"
													name="approvel-typely1cwkbskux2rtaow8" type="radio"><span
													class="">依次审批（按顺序依次审批）</span></label></div>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">审批人为空时</div>
									<div class="item-content">
										<div class="radio-line-group"><label class=""><input value="自动通过"
													name="approvel-typely1cwkbs3j8jhl3vm8g" checked="true"
													type="radio"><span class="">自动通过</span></label><label
												class=""><input value="指定人员审批" name="approvel-typely1cwkbs3j8jhl3vm8g"
													type="radio"><span class="">指定人员审批</span></label><label
												class=""><input value="转交给管理员审批" name="approvel-typely1cwkbs3j8jhl3vm8g"
													type="radio"><span class="">转交给管理员审批</span></label></div>
										<div class="sub-approver approver-user-selector add-user"
											style="display: none;">
											<p class=""><span class="">添加成员</span><span
													class="light-text">（不能超过25人）</span></p>
											<div class="add-approver-wrapper">
												<div class="add-approver-btn">+</div>
											</div>
										</div>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">审批人与提交人为同一人时</div>
									<div class="item-content">
										<div class="radio-line-group"><label class=""><input value="由提交人自己审批"
													name="approvel-typely1cwkbsb9e3gf5buxb" type="radio"><span
													class="">由提交人自己审批</span></label><label class=""><input value="自动跳过"
													name="approvel-typely1cwkbsb9e3gf5buxb" type="radio"><span
													class="">自动跳过</span></label><label class=""><input value="转交给直属上级"
													name="approvel-typely1cwkbsb9e3gf5buxb" type="radio"><span
													class="">转交给直属上级</span></label><label class=""><input
													value="转交部门负责人审批" name="approvel-typely1cwkbsb9e3gf5buxb"
													type="radio"><span class="">转交部门负责人审批</span></label></div>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">提示</div>
									<div class="item-content more-info">
										<p class="">若审批人离职，会自动转交给审批人的上级代为处理</p>
										<p class=""><span class="">若同一审批人在流程中重复出现，默认只审批一次。可前往</span><span
												class="goto-other-setting">更多设置</span><span class="">修改</span></p>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">抄送人设置</div>
									<div class="item-content cc-container"></div>
									<div class="item-content">
										<div class="add-operator">＋ 添加抄送人</div>
									</div>
								</div>
								<div class="item-wrapper">
									<div class="item-key">提示</div>
									<div class="item-content more-info">
										<p class="">抄送的人数最多支持100人以内</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="approval-editor-footer-wrapper">
						<div class="btn-group"><button class="fz-btn primary" type="button">保存</button><button
								class="fz-btn cancel" type="button">取消</button></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="approvalAttributeEditor.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script type="text/javascript">
	var rootNode = new FlowNodes();
	document.body.appendChild(rootNode.getElement());

	var startFlowNode = new FlowNode("提交", "start");
	rootNode.addFlowNode(startFlowNode);
	// var approvalFlowNode1 = new FlowNode("审批节点1", "approval");
	// rootNode.addFlowNode(approvalFlowNode1)

	// var approvalFlowNode2 = new FlowNode("审批节点2", "approval");
	// rootNode.addFlowNode(approvalFlowNode2)

	// var ccFlowNode = new FlowNode("抄送后勤部", "cc");
	// rootNode.addFlowNode(ccFlowNode)

	// var flowNodeRoute = new FlowNodeRoute();
	// rootNode.addFlowNode(flowNodeRoute)

	var endFlowNode = new FlowNode("结束", "end");
	rootNode.addFlowNode(endFlowNode)
	
	var approvalAttributesPanel = new Vue({
		el:"#approvalAttributes",
		data(){
			return {
				approvalConfig:{
					approvalTargetTypes:['上级','部门负责人','角色','用户组','指定成员','提交人自选','提交人本人','节点审批人','连续多级上级','连续多级部门负责人','表单内联系人','表单内部门']
				},
				approvalName:"审批2",
				approvalMethod:"人工审批",
				approvelTargets:[
					{
						target:"指定成员",
						users:[
							"马小丁","张小龙"
						]
					}
				]
			}
		}
	});
</script>
